<?php

/**
 * 案例卡片组件
 * 用于展示项目成功案例，包含案例详情、挑战、解决方案和成果
 */
$configKey = isset($configKey) ? $configKey : 'case-card';
// 页面文本配置
$texts = [
    'challenge_title' => '挑战',
    'solution_title' => '解决方案',
    'results_title' => '成果'
];
// 从页面配置获取案例卡片组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => 'mobile-development',
    'section_pretitle' => '移动技术',
    'section_title' => '移动应用成功案例',
    'section_subtitle' => '我们开发的移动应用帮助各行业客户实现业务目标与用户增长',
    'card_style' => 'modern', // modern, classic, minimal
    'more_btn_text' => '查看所有案例',
    'more_btn_link' => '#',
    'items' => [
        [
            'id' => '1',
            'title' => '金融科技移动应用',
            'platforms' => 'iOS & Android',
            'btn_text' => '查看完整案例',
            'btn_link' => '/case?id=1',
            'challenge' => '需要安全可靠的移动支付解决方案，支持复杂金融交易与实时数据更新',
            'solution' => '采用原生开发方案，结合高级加密技术与高效数据同步机制，确保安全与性能',
            'results' => [
                '用户量' => '120万+',
                '日均交易' => '5万+',
                '应用评分' => '4.9/5',
                '崩溃率' => '0.3%'
            ],
            'image' => 'https://picsum.photos/seed/fintech/800/500',
            'image_alt' => '金融科技移动应用界面'
        ],
        [
            'id' => '2',
            'title' => '全渠道零售应用',
            'platforms' => '跨平台 (React Native)',
            'btn_text' => '查看完整案例',
            'btn_link' => '/case?id=2',
            'challenge' => '需要快速上线并支持多平台，实现线上线下无缝购物体验',
            'solution' => '采用React Native跨平台方案，共享业务逻辑，实现快速迭代与一致体验',
            'results' => [
                '开发周期' => '缩短45%',
                '转化率' => '+32%',
                '用户留存' => '+28%',
                '跨平台一致性' => '98%'
            ],
            'image' => 'https://picsum.photos/seed/retailapp/800/500',
            'image_alt' => '零售移动应用界面'
        ]
    ],
    'texts' => $texts,
    'py' => '16',
    'container_padding_x' => 'px-4 sm:px-6 lg:px-8',
    'title_margin_bottom' => '16',
    'grid_cols' => 'grid-cols-1 lg:grid-cols-2',
    'grid_gap' => '8',
    'more_button_margin_top' => '10'
], $pageConfig['components'][$configKey] ?? []);
?>
<!-- 成功案例 -->
<div id="<?= $data['section_id']; ?>" class="w-full mx-auto py-<?= $data['py']; ?>">
    <div class="container mx-auto <?= $data['container_padding_x']; ?>">
        <div class="text-center mb-<?= $data['title_margin_bottom']; ?>">
            <?php if (!empty($data['section_pretitle'])) : ?>
                <p class="text-sm font-semibold text-blue-600 tracking-wide uppercase mb-2">
                    <?= $data['section_pretitle']; ?>
                </p>
            <?php endif; ?>
            <h2 class="text-3xl font-bold text-gray-900 mb-4"><?= $data['section_title']; ?></h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                <?= $data['section_subtitle']; ?>
            </p>
        </div>

        <div class="grid <?= $data['grid_cols']; ?> gap-<?= $data['grid_gap']; ?>">
            <?php foreach ($data['items'] as $case): ?>
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300">
                    <div class="lg:flex">
                        <div class="lg:shrink-0 lg:w-1/2">
                            <img
                                class="h-48 w-full object-cover lg:h-full lg:w-full"
                                src="<?= htmlspecialchars($case['image']); ?>"
                                alt="<?= htmlspecialchars($case['image_alt']); ?>">
                        </div>
                        <div class="p-8 lg:w-1/2">
                            <div class="text-sm font-semibold text-blue-600 mb-2">
                                <?= htmlspecialchars($case['platforms']); ?>
                            </div>
                            <h3 class="text-2xl font-bold text-gray-900 mb-3">
                                <?= htmlspecialchars($case['title']); ?>
                            </h3>

                            <div class="mb-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-1"><?= htmlspecialchars($data['texts']['challenge_title']); ?></h4>
                                <p class="text-gray-600 text-sm">
                                    <?= htmlspecialchars($case['challenge']); ?>
                                </p>
                            </div>

                            <div class="mb-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-1"><?= htmlspecialchars($data['texts']['solution_title']); ?></h4>
                                <p class="text-gray-600 text-sm">
                                    <?= htmlspecialchars($case['solution']); ?>
                                </p>
                            </div>

                            <div>
                                <h4 class="text-sm font-semibold text-gray-900 mb-1"><?= htmlspecialchars($data['texts']['results_title']); ?></h4>
                                <ul class="text-sm text-gray-700 space-y-1">
                                    <?php foreach ($case['results'] as $metric => $value): ?>
                                        <li class="flex items-center">
                                            <i class="fa fa-arrow-up text-green-500 mr-2"></i>
                                            <span><?= htmlspecialchars($metric . ': ' . $value); ?></span>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>

                            <div class="mt-6">
                                <a href="<?= htmlspecialchars($case['btn_link']); ?>" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
                                    <?= htmlspecialchars($case['btn_text']); ?>
                                    <i class="fa fa-long-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <div class="text-center mt-<?= $data['more_button_margin_top']; ?>">
            <a href="<?= htmlspecialchars($data['more_btn_link']); ?>" class="inline-flex items-center px-6 py-3 text-base font-medium rounded-md text-blue-600 border-2 border-blue-500 hover:bg-blue-50 transition-colors duration-300">
                <?= htmlspecialchars($data['more_btn_text']); ?>
                <i class="fa fa-chevron-right ml-2"></i>
            </a>
        </div>
    </div>
</div>